<script setup>
import { Lock, Edit } from '@element-plus/icons-vue'
import { ref } from 'vue'

import { updatePasswordService, captchaCodeService } from '@/api/user'
import bus from '@/utils/bus'

const updatePasswordFormRef = ref('')
let updatePasswordForm = ref({
    password: '',
    code: '',
})
let isShowPasswordEditing = ref(false)

/**
 * 提交更新密码的表单
 */
const postUpdatePassword = async () => {
    await updatePasswordFormRef.value.validate()
    await updatePasswordService({
        code: updatePasswordForm.value.code,
        password: updatePasswordForm.value.password
    })
    ElMessage({
        message: '密码修改成功',
        type: 'success'
    })
    bus.emit('updateInfo')
    close()
}

const rules = ref({
    code: [
        { required: true, message: '请输入验证码', trigger: 'blur' },
        { min: 6, max: 6, message: '请输入6位验证码', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
        { min: 6, max: 20, message: '请输入6-20位密码', trigger: 'blur' }
    ]
})

const yz = ref({
    total: 60,
    curry: 60,
    timer: null
})

const disabled = ref(false)

//发送验证码
const onSend = async () => {
    //验证通过 err：true, 反之为：false
    if (!yz.value.timer && yz.value.total === yz.value.curry) {
        disabled.value = true
        try {
            await captchaCodeService()
            ElMessage.success('验证码已发送，一分钟之内有效，请注意查收')
            //开启定时器
            yz.value.timer = setInterval(() => {
                yz.value.curry--
                if (yz.value.curry <= 0) {
                    clearInterval(yz.value.timer)
                    yz.value.timer = null
                    yz.value.curry = yz.value.total
                    disabled.value = false
                }
            }, 1000)
        } finally {
            disabled.value = false
        }
    }
}

const close = () => {
    updatePasswordForm.value.password = ''
    updatePasswordForm.value.code = ''
    isShowPasswordEditing.value = false
}
</script>

<template>
    <div class="space" style="display: flex">
        <span>修改密码：</span>
        <span style="color: rgb(147, 147, 147)">已设置</span>

        <span @click="isShowPasswordEditing = !isShowPasswordEditing" class="edit-btn">
            <el-icon>
                <Edit />
            </el-icon>修改
        </span>
    </div>

    <transition :duration="400" name="animate__animated animate__zoomOut" appear enter-active-class="animate__fadeIn"
        leave-active-class="animate__fadeOut ">
        <div v-show="isShowPasswordEditing" style="margin-top: 1rem">
            <el-form ref="updatePasswordFormRef" :model="updatePasswordForm" :rules="rules" class="form-css">

                <el-form-item label="验 证 码" prop="code">
                    <el-input class="login-form-input" placeholder="验证码" v-model="updatePasswordForm.code">
                        <template v-slot:prefix>
                            <el-icon class="el-input__icon">
                                <Lock />
                            </el-icon>
                        </template>
                        <template #append>
                            <el-button type="primary" :disabled="disabled" @click="onSend">{{
                                yz.total === yz.curry ? '发送验证码' : yz.curry + 's后重新发送'
                            }}</el-button>
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item label="新 密 码" prop="password">
                    <el-input class="login-form-input" placeholder="新 密 码" v-model="updatePasswordForm.password"
                        show-password>
                        <template v-slot:prefix>
                            <el-icon class="el-input__icon">
                                <Lock />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-button @click="postUpdatePassword" type="primary">确 定</el-button>
                    <el-button @click="close">取 消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </transition>
</template>

<style lang="scss" scoped>
.form-css {
    max-width: 400px;
}

.space {
    margin: 0.5rem 0;
}

.edit-btn {
    margin-left: 1rem;
    display: flex;
    align-items: center;
    color: rgb(23, 81, 153);
    white-space: nowrap;
    cursor: pointer; // 鼠标放上去显示手势
}
</style>
